<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}


</style>

<template>
  <div class="app-container">
    <el-container style="height: 650px; border: 1px solid #eee">
      <el-aside width="400px" style="background-color: rgb(238, 241, 246)">
<!--        <el-dropdown v-for="datasource in datasourceList"-->
<!--                     @click="getDatasourceInfo(datasource)"-->
<!--                     split-button-->
<!--                     @visible-change="getDatasourceInfo(datasource)"-->
<!--        >-->
<!--        <span class="el-dropdown-link">-->
<!--          <li class="el-icon&#45;&#45;right">-->
<!--            {{ datasource.title }}-->
<!--          </li>-->
<!--        </span>-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item v-for="table in datasource.children">-->
<!--              <i @click="getTableInfo(table)">{{ table.title }}</i>-->
<!--            </el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->

        <el-tree
          :data="datasourceList"
          accordion
          @node-expand="getInfo"
        >
        </el-tree>
      </el-aside>

      <el-container>

        <el-main>

          <!--     dbinfo     -->
          <el-descriptions v-if="dbDesc.visibleDesc" class="margin-top" title="数据库信息" :column="4" border>
            <el-descriptions-item>
              <template slot="label">
                数据源
              </template>
              {{ dbDesc.title }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                名称
              </template>
              {{ dbDesc.databaseName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                类型
              </template>
              {{ dbDesc.productName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                版本
              </template>
              {{ dbDesc.productVersion }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                驱动名
              </template>
              {{ dbDesc.driverName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                只读
              </template>
              {{ dbDesc.readOnly }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                事务
              </template>
              {{ dbDesc.supportsTransactions }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                表数量
              </template>
              {{ dbDesc.tableCount }}
            </el-descriptions-item>
          </el-descriptions>
          <hr style="background-color: black; height:2px; border:none;" v-if="tableDesc.visibleDesc"/>

          <!--     tableinfo     -->
          <el-descriptions v-if="tableDesc.visibleDesc" class="margin-top" title="数据表信息" :column="3" border>
            <el-descriptions-item>
              <template slot="label">
                表名称
              </template>
              {{ tableDesc.id }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                表注释
              </template>
              {{ tableDesc.title }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                字段数量
              </template>
              {{ tableDesc.fieldCount }}
            </el-descriptions-item>
          </el-descriptions>
          <hr style="background-color: blue; height:1px; border:none;" v-if="tableDesc.visibleDesc"/>

          <!--     表结构     -->
          <el-table align="center" v-if="tableDesc.visibleDesc" :data="tableMetaList"
                    size="mini"
          >
            <el-table-column label="字段名称" align="center" prop="columnName"/>
            <el-table-column label="字段注释" align="center" prop="comment"/>
            <el-table-column label="字段类型" align="center" prop="typeName"/>
            <el-table-column label="是否NULL" align="center" prop="nullable"/>
            <el-table-column label="是否自增" align="center" prop="autoIncrement"/>
          </el-table>

          <hr style="background-color: blue; height:1px; border:none;" v-if="tableDesc.visibleDesc"/>
          <!--     index     -->
          <el-table align="center" v-if="tableDesc.visibleDesc" :data="tableIndexMetaList"
                    size="mini"
          >
            <el-table-column label="索引名称" align="center" prop="indexName"/>
            <el-table-column label="索引字段" align="center" prop="columnName"/>
            <el-table-column label="是否唯一" align="center" prop="nonUnique"/>

          </el-table>

          <hr style="background-color: blue; height:1px; border:none;" v-if="tableDesc.visibleDesc"/>
          <!--     primary     -->
          <el-table align="center" v-if="tableDesc.visibleDesc" :data="tableKeysMetaList"
                    size="mini"
          >
            <el-table-column label="主键名称" align="center" prop="pkName"/>
            <el-table-column label="主键字段" align="center" prop="columnName"/>
            <el-table-column label="主键序列" align="center" prop="keySeq"/>

          </el-table>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {metaTreeTableList} from '@/api/websql/sqlManager'

export default {
  name: "MetaTable",
  data() {
    return {
      tableKeysMetaList: null,
      tableIndexMetaList: null,
      tableMetaList: null,
      tableDesc: {
        visibleDesc: false,
        dataInfo: {
          id: null,
          title: null,
          fieldCount: null,
        }
      },
      dbDesc: {
        visibleDesc: false,
        dataInfo: {
          title: null,
          databaseName: null,
          productName: null,
          productVersion: null,
          driverName: null,
          readOnly: null,
          supportsTransactions: null,
          tableCount: null
        }
      },
      datasourceList: []
    }
  },
  created() {

    metaTreeTableList().then(res => {
      this.datasourceList = res.data;
      const processTree = node => {
        node.children?.forEach(child => {
          child.label = child.id;  // 所有子节点用 id
          processTree(child);     // 递归处理子树
        });
        node.label = node.title;  // 根节点用 title（最后执行确保覆盖）
      };
      this.datasourceList.forEach(processTree);
    });

    // metaTreeTableList().then(res => {
    //   this.datasourceList = res.data;
    //   this.datasourceList.forEach(i => {
    //     i.label = i.title;
    //     i.children.forEach(n => {
    //       n.label = n.id;
    //       n.children.forEach(m=>{
    //         m.label=m.id;
    //       })
    //       // n.children=null;
    //     })
    //   })
    // })
  },
  methods: {
    // getInfo(event,data){
    getInfo(data){
      console.log(data);
      if (data.tableMeta.tablesMetaList!=null){
        this.getTableInfo(data);
      }else this.getDatasourceInfo(data)
    },
    getTableInfo(table) {
      this.tableDesc.visibleDesc = false;
      this.tableDesc.visibleDesc = true;
      this.tableDesc.id = table.id;
      // 分割 : 后的注释【如没有则不显示】
      let index = table.title.indexOf(':') + Number(1);
      this.tableDesc.title = table.title.slice(index);
      this.tableDesc.fieldCount = table.fieldCount;
      this.tableMetaList = table.tableMeta.tablesMetaList;
      this.tableIndexMetaList = table.tableMeta.tablesIndexMetaList;
      this.tableKeysMetaList = table.tableMeta.tablesKeysMetaList;
      // alert(1);
      // console.log(table);
    },
    getDatasourceInfo(datasource) {
      this.tableDesc.visibleDesc = false;
      this.dbDesc.visibleDesc = false;
      this.dbDesc.visibleDesc = true;
      this.dbDesc.databaseName = datasource.tableMeta.databaseName;
      this.dbDesc.productName = datasource.tableMeta.productName;
      this.dbDesc.productVersion = datasource.tableMeta.productVersion;
      this.dbDesc.driverName = datasource.tableMeta.driverName;
      this.dbDesc.readOnly = datasource.tableMeta.readOnly;
      this.dbDesc.supportsTransactions = datasource.tableMeta.supportsTransactions;
      this.dbDesc.tableCount = datasource.tableCount;
      this.dbDesc.title = datasource.title;
    }
  },
}

</script>
